<template>
	<view>
		<!-- 筛选 -->
		<view class="filter">
			<text class="active">综合</text>
			<text>销量</text>
			<text>价格</text>
		</view>
		<!-- 商品列表 -->
		<scroll-view class="goods" scroll-y>
			<view class="item" @click="goDetail">
				<!-- 商品图片 -->
				<image class="pic" src="http://static.botue.com/ugo/uploads/goods_1.jpg"></image>
				<!-- 商品信息 -->
				<view class="meta">
					<view class="name">
						【海外购自营】黎珐(ReFa) MTG日本 CARAT铂金微电流瘦脸瘦身提拉紧致V脸美容仪 【保税仓发货】
					</view>
					<view class="price">
						<text>￥</text>
						1399
						<text>.00</text>
					</view>
				</view>
			</view>
			<view class="item" @click="goDetail">
				<!-- 商品图片 -->
				<image class="pic" src="http://static.botue.com/ugo/uploads/goods_2.jpg"></image>
				<!-- 商品信息 -->
				<view class="meta">
					<view class="name">
						卡奇莱德汽车车载空气净化器负离子除甲醛PM2.5除烟异味车用氧吧双涡轮出风（红色）
					</view>
					<view class="price">
						<text>￥</text>
						168
						<text>.00</text>
					</view>
				</view>
			</view>
			<view class="item" @click="goDetail">
				<!-- 商品图片 -->
				<image class="pic" src="http://static.botue.com/ugo/uploads/goods_3.jpg"></image>
				<!-- 商品信息 -->
				<view class="meta">
					<view class="name">沿途（yantu）车载充电器车充一拖二usb转接口手机智能头多功能汽车点烟器</view>
					<view class="price">
						<text>￥</text>
						168
						<text>.00</text>
					</view>
				</view>
			</view>
			<view class="item" @click="goDetail">
				<!-- 商品图片 -->
				<image class="pic" src="http://static.botue.com/ugo/uploads/goods_4.jpg"></image>
				<!-- 商品信息 -->
				<view class="meta">
					<view class="name">车载冰箱7.5L 冷暖两用汽车冰箱半导体12V迷你电冰箱升级款</view>
					<view class="price">
						<text>￥</text>
						168
						<text>.00</text>
					</view>
				</view>
			</view>
			<view class="item" @click="goDetail">
				<!-- 商品图片 -->
				<image class="pic" src="http://static.botue.com/ugo/uploads/goods_5.jpg"></image>
				<!-- 商品信息 -->
				<view class="meta">
					<view class="name">神行者电子狗 神行者L70电子狗测速 测速雷达 流动测速 多种警示路段提醒</view>
					<view class="price">
						<text>￥</text>
						168
						<text>.00</text>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<view class="getMore">正在加载...</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	methods: {
		goDetail() {
			uni.navigateTo({
				url: '/subpkg/pages/goods/index'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.filter {
	display: flex;
	height: 96rpx;
	line-height: 96rpx;
	border-bottom: 1rpx solid #ddd;

	/* #ifdef H5 */
	position: relative;
	z-index: 99;
	/* #endif */

	text {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #333;

		&.active {
			color: #ea4451;
		}
	}
}

.goods {
	position: absolute;
	width: 100%;
	top: 97rpx;
	bottom: 0;
}

.item {
	display: flex;
	padding: 30rpx 20rpx 30rpx 0;
	margin-left: 20rpx;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}

	.pic {
		width: 200rpx;
		height: 200rpx;
		margin-right: 30rpx;
	}

	.meta {
		flex: 1;
		font-size: 27rpx;
		color: #333;
		position: relative;
	}

	.name {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.price {
		position: absolute;
		bottom: 0;

		color: #ea4451;
		font-size: 33rpx;

		text {
			font-size: 22rpx;
		}
	}
}
</style>
